<template>
  <el-drawer v-if="!isMobile" v-model="dialogVisible" title="道路概况" direction="ltr" @close="close">
    <template #header="{ close, titleId, titleClass }">
      <div class="btns">
        <div class="btn active">周边风景</div>
      </div>
    </template>
    <div class="content content1">
      <div class="item" v-for="item in sceneryList" :key="item.id" @click="jumpTo(item)">
        <img class="img" :src="item.img" alt="" />
        <!-- <div class="info">
                    <div class="title">{{ item.title }}</div>
                    <div class="address">地址：{{ item.address }}</div>
                    <div class="time">时间：{{ item.time }}</div>
                </div> -->
      </div>
    </div>
  </el-drawer>
  <el-dialog v-else class="dialog" v-model="dialogVisible" title="周边风景" :top="isMobile ? '10vh' : '25vh'"
    :width="isMobile ? '90%' : '30%'" @close="close">
    <template #header="{ close, titleId, titleClass }">
      <div class="btns">
        <div class="btn active">周边风景</div>
      </div>
    </template>
    <div class="content">
      <div class="item" v-for="item in sceneryList" :key="item.id" @click="jumpTo(item)">
        <img class="img" :src="item.img" alt="" />
        <!-- <div class="info">
                    <div class="title">{{ item.title }}</div>
                    <div class="address">地址：{{ item.address }}</div>
                    <div class="time">时间：{{ item.time }}</div>
                </div> -->
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";

const route = useRoute();
const isMobile = inject("isMobile");
/** 风景列表 */
const sceneryList = ref([]);
const dialogVisible = ref(false);
import modelDatas from "@/assets/json/model.json";
const modelData = modelDatas.model.find((i) => i.name == route.query?.name);
sceneryList.value = modelData.sceneryList;

const jumpTo = (item) => {
  // 判断是否是微信浏览器
  if (navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1) {
    uni.navigateTo({
      url: `/pages/scener/index?src=${item.src}`,
    });
  } else {
    window.open(item.src, "_blank");
  }
};
/** 打开弹窗 */
const open = () => {
  dialogVisible.value = true;
};
/** 关闭弹窗 */
const close = () => {
  dialogVisible.value = false;
};

defineExpose({
  open,
});
</script>

<style lang="scss" scoped>
.content1 {
  height: 100% !important;
  gap: 20px !important;
}

.content {
  height: 400px;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
  overflow-y: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .item {
    margin-bottom: 10px;
    box-sizing: content-box;
    height: 300px;
    width: 100%;
    // position: relative;
    // overflow: hidden;
    // background-color: red;

    .img {
      width: 100%;
      height: 100%;
      border-radius: 12px;
    }

    .info {
      // margin-top: 10px;
      position: absolute;
      top: 10px;
      left: 20px;
      display: flex;
      flex-direction: column;

      .title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 5px;
      }

      .address,
      .time {
        font-size: 12px;
        color: #fff;
      }
    }
  }
}
</style>
